<template>
  <div>
    <qr-code ref="qrCode" class="qr-box" :value="qrText" width="100" height="100"></qr-code>
    <el-input v-model="qrText" type="textarea" placeholder="请输入内容" class="qr-text"></el-input>
    <el-button class="btn" @click="reBuild">生成</el-button>
    <p class="footer">本组件目前构建基于 <a href="https://github.com/davidshimjs/qrcodejs">[davidshimjs/qrcodejs]</a> </p>
  </div>

</template>

<script>
  import qrCode from '../component/qrCode'
  import ATextarea from 'ant-design-vue/es/input/TextArea'
  export default {
    name: 'qrCodeUseCase',
    components: {
      qrCode
    },
    data() {
      return {
        qrText: 'https://www.jianshu.com/u/42be3945a3bd',
        value: ''
      }
    },
    methods: {
      reBuild() {
        this.$refs.qrCode.refresh(this.qrText)
      },
    },
    created() {

    },
  }
</script>

<style scoped>
.qr-box{
  width: 100px;
  height: 100px;
  margin: 30px auto;
}
.qr-text{
  display: block;
  margin: 50px auto;
  width: 80%;
}
.btn{
  display: block;
  margin: 0 auto;
}
.footer{
  position: absolute;
  width: 80%;
  bottom: 50px;
  right: 0;
}
</style>
